<template>
  <!-- 通用下拉组件 -->
  <el-select :value="value" :placeholder="placeholder || '请选择'" :multiple="multiple" :clearable="clearable"
    :filterable="filterable" :disabled="disabled" @input="handleInput" @change="handleChange">
    <el-option v-for="item in list" :key="item[defaultProps.key]" :label="item[defaultProps.label]"
      :value="item[defaultProps.value]"></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'ComponentSelect',
  props: {
    value: { required: true },
    list: { type: Array, required: true },
    placeholder: { type: String, default: '请选择' },
    multiple: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    clearable: { type: Boolean, default: true },
    filterable: { type: Boolean, default: true },
    defaultProps: {
      type: Object,
      default() {
        return { key: 'id', label: 'name', value: 'id' };
      },
    },
  },
  methods: {
    handleChange() {
      this.$emit('change');
    },
    handleInput(value) {
      this.$emit('input', value);
    },
  },
};
</script>

<style scoped></style>
